<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="../css/login.css">
    <script src="../../js/login.jquery.min.js"></script>
</head>
<body>
<div class="container" id="login-box">

    <div class="form-container sign-up-container">
        <form id="signUp-form1">
            <h1>注册</h1>
            <div class="txtb">
                <input type="text" name="userName" required>
                <span data-placeholder="账户名"></span>
            </div>
            <div class="txtb">
                <input type="email" name="email" required>
                <span data-placeholder="邮箱"></span>
            </div>
            <div class="txtb">
                <input type="tel" name="mobile" required> <!-- 修改type为tel -->
                <span data-placeholder="电话号码"></span>
            </div>
            <div class="txtb">
                <input type="password" name="password" required>
                <span data-placeholder="密码"></span>
            </div>
            <div class="txtb">
                <input type="password" name="confirmPassword" required>
                <span data-placeholder="确认密码"></span>
            </div>
            <button id="successMessage1">注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form id="signIn-form2">
            <h1>登录</h1>
            <div class="txtb">
                <input type="text" name="userName" required>
                <span data-placeholder="账户名"></span>
            </div>
            <div class="txtb">
                <input type="password" name="password" required>
                <span data-placeholder="密码"></span>
            </div>
            <a href="#">忘记密码？</a>
            <button id="successMessage2">登录</button>
        </form>
    </div>

    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有账号？</h1>
                <p>请使用您的账号进行登录</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有账号?</h1>
                <p>请注册您的信息</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $("#signUp").click(function(){
        $("#login-box").addClass('right-panel-active')
    })

    $("#signIn").click(function(){
        $("#login-box").removeClass('right-panel-active')
    })

    $(".txtb input").on("focus",function(){
        $(this).addClass("focus")
    })

    $(".txtb input").on("blur",function(){
        if($(this).val() == '')
            $(this).removeClass("focus")
    })
</script>

<script>
    $(document).ready(function() {
        $("#signUp-form1").submit(function(event){
            event.preventDefault();

            var username = $(this).find('input[name="userName"]').val();
            var email = $(this).find('input[name="email"]').val();
            var mobile = $(this).find('input[name="mobile"]').val();
            var password = $(this).find('input[name="password"]').val();
            var confirmPassword = $(this).find('input[name="confirmPassword"]').val();

            if(password !== confirmPassword) {
                alert("密码不匹配");
                return;
            }

            $.ajax({
                url: '/sysUser/save', // 添加斜杠确保是绝对路径
                method: 'POST',
                contentType: "application/json",
                data: JSON.stringify({
                    userName: username,
                    email: email,
                    mobile: mobile,
                    password: password
                }),
                success: function(response){
                    if(response.success) {
                        alert("注册成功！");
                        $("#login-box").removeClass('right-panel-active');
                        $('#signUp-form1')[0].reset();
                        $(".txtb input").removeClass("focus"); // 移除输入框的focus样式
                    }
                },
                error: function(xhr, status, error){
                    alert("注册失败: " + (xhr.responseText || "请检查输入信息"));
                }
            });
        });

        $("#signIn-form2").submit(function(event){
            event.preventDefault();

            var username = $(this).find('input[name="userName"]').val();
            var password = $(this).find('input[name="password"]').val();

            $.ajax({
                url: '/sysUser/login', // 添加斜杠确保是绝对路径
                method: 'GET',
                data: {
                    userName: username,
                    password: password
                },
                success: function(response){
                    if(response === "登录成功") {
                        alert("登录成功！");
                        setTimeout(function() {
                            window.location.href = 'index.html';
                        }, 100);
                    } else {
                        alert(response); // 显示服务器返回的错误信息
                    }
                },
                error: function(xhr, status, error){
                    alert("登录失败: " + (xhr.responseText || "请检查用户名和密码"));
                }
            });
        });
    });
</script>
</html>